<template>
  <!-- 赔付列表 客服端 客服介入的赔付 -->
  <div class="app-container jklis">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      class="search-form-new"
      label-width="80px"
    >

     <!-- <el-form-item el-form-item label="店铺" prop="status" v-hasPermi="['searchTenantID']">
        <el-select
          v-model="queryParams.tenantId"
          placeholder="请选择店铺"
          clearable
          filterable
        >
          <el-option
            v-for="dict in tenantList"
            :key="dict.tenantId"
            :label="dict.tenantName"
            :value="dict.tenantId"
          />
        </el-select>
      </el-form-item> -->
  
      <el-form-item label="订单编号" prop="sourceNo">
        <el-input
          v-model="queryParams.sourceNo"
          placeholder="请输入订单编号"
          clearable
          
        />
      </el-form-item>
      <el-form-item label="申请日期" prop="remark">
        <el-date-picker
          v-model="timer"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="searchList"
          
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="btns"> 
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchList"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          type="warning"
          @click="resetQuery"
          >重置</el-button
        >
     
      </el-form-item>
    </el-form>
    <div class="table_box">
            <el-table
              :data="tableData.records"
              style="width: 100%"
              stripe
            >
            <!-- 提号时间，商品ID 游戏类型 区服 实名状态   游戏账号【对应的商品链接】 -->
            
            <!-- <el-table-column
              prop=""
              label="归属部门"
              min-width="120"
            ></el-table-column> -->
            <el-table-column
              prop="sourceNo"
              label="订单编号"
            ></el-table-column>
            <el-table-column prop="pfTenantName" label="卖家" >
            </el-table-column>
            <el-table-column
              prop="sqAmount"
              label="申请赔付金额"
            ></el-table-column>
            <el-table-column
              prop="sjAmount"
              label="实际赔付金额"
            ></el-table-column>
            <el-table-column
              prop="sqRemark"
              label="申请描述"
            ></el-table-column>
            <el-table-column
              prop="sqTenantName"
              label="申请店铺"
            ></el-table-column>

            <el-table-column
              prop="sqUserName"
              label="申请人"
            ></el-table-column>

            <el-table-column
              prop="createTime"
              label="申请时间"
            ></el-table-column>
            <el-table-column prop="" label="处理状态" >
              <template slot-scope="scope">
                <el-tag  :type="commonMaps.peifuStateMap[scope.row.pfState].type">{{ commonMaps.peifuStateMap[scope.row.pfState].label }}</el-tag>
      
              </template>
            </el-table-column>
            <el-table-column prop="" label="客服介入" >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.jieru==1" type="warning">未介入</el-tag>
                <el-tag v-if="scope.row.jieru==2" type="danger">已介入</el-tag>
                <div v-if="scope.row.jieru==2">
                  <el-tag  :type="commonMaps.peifuStateMap[scope.row.kfState].type">{{ commonMaps.peifuStateMap[scope.row.kfState].label }}</el-tag>
                </div>
              </template>
            </el-table-column>
         
            <el-table-column fixed="right" label="操作" min-width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="openOrder(scope.row)"
                  v-if="scope.row.pfState == 3&&scope.row.kfState == 1"
                  >处理</el-button>
                <el-button
                  type="text"
                  @click="viewOrder(scope.row.id)"
                  >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
              @pagination="getList" />
          </div>
   
    <peifuDone ref="peifuDone"></peifuDone>
    <peifuView ref="peifuView"></peifuView>
   
  </div>
</template>

<script>
import peifuDone from './components/peifuDone.vue'
import peifuView from './components/peifuView.vue'
import { getclaimRecordList } from '../../../api/peifu';
export default {
  name: "PeifuKefu",
  components: {
    peifuDone,peifuView
  },
  data() {
    return {
      tableData: {
        records: [],
        total: 0,
      },
      timer:[],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: '',
        sourceNo: '',
        createTimeStart: '',
        createTimeEnd: '',
        dataType: "all",
        jieru:'2'
      },
    };
  },
  created() {
   
    this.getList();
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList
    }
  },
  methods: {
    searchList(){
      this.queryParams.pageNum = 1;
      this.getList()
    },
  
    // 获取列表
    getList() {
      // queryParams 请求列表
      this.loading = true;
      if (this.timer && this.timer.length == 2) {
        this.queryParams.createTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.createTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.createTimeStart = "";
        this.queryParams.createTimeEnd = "";
      }
      getclaimRecordList(this.queryParams).then((res) => {
        this.loading = false;
        this.tableData.records = res.rows;
        this.tableData.total = res.total;
      });
    },
    // 打开处理赔付的弹窗
    openOrder(row){
      this.$refs.peifuDone.open(row,'kefu')
    },
    // 打开查看售后的弹窗
    viewOrder(id){
      this.$refs.peifuView.open(id,'kefu')
    },

    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        type: '',
        sourceNo: '',
        createTimeStart: '',
        createTimeEnd: '',
        dataType: this.queryParams.dataType,
        jieru:'2'
      };
      this.timer = []
      this.getList();
    },
   
  },
};
</script>
<style lang="scss" scoped>
.link {
  color: blue;
  cursor: pointer;
}
</style>
